React experimental_useFormStatus: Una guía completa para la gestión mejorada de formularios

            // app/contact-form.jsx (Server Component)
'use server';

import { experimental_useFormStatus as useFormStatus } from 'react-dom';

async function handleSubmit(formData) {
  'use server';
  // Simulate an asynchronous form submission
  await new Promise((resolve) => setTimeout(resolve, 2000));

  const name = formData.get('name');
  const email = formData.get('email');
  const message = formData.get('message');

  if (!name || !email || !message) {
    throw new Error('All fields are required.');
  }

  // In a real application, you would send the data to a server
  console.log('Form data:', { name, email, message });

  return { success: true, message: 'Thank you for your submission!' };
}

function ContactForm() {
  const { pending, data, error } = useFormStatus();

  return (
    

      

        Name:
        
      
      

        Email:
        
      
      

        Message:
              </div>
      <button type="submit" disabled={pending}>
        {pending ? 'Submitting...' : 'Submit'}
      </button>

      {error && <p style={{ color: 'red' }}>Error: {error.message}</p>}
      {data?.success && <p style={{ color: 'green' }}>{data.message}</p>}
    </form>
  );
}

export default ContactForm;
</code>
            <div class="copy-button-container">
              <button 
                data-code="Ly8gYXBwL2NvbnRhY3QtZm9ybS5qc3ggKFNlcnZlciBDb21wb25lbnQpCid1c2Ugc2VydmVyJzsKCmltcG9ydCB7IGV4cGVyaW1lbnRhbF91c2VGb3JtU3RhdHVzIGFzIHVzZUZvcm1TdGF0dXMgfSBmcm9tICdyZWFjdC1kb20nOwoKYXN5bmMgZnVuY3Rpb24gaGFuZGxlU3VibWl0KGZvcm1EYXRhKSB7CiAgJ3VzZSBzZXJ2ZXInOwogIC8vIFNpbXVsYXRlIGFuIGFzeW5jaHJvbm91cyBmb3JtIHN1Ym1pc3Npb24KICBhd2FpdCBuZXcgUHJvbWlzZSgocmVzb2x2ZSkgPT4gc2V0VGltZW91dChyZXNvbHZlLCAyMDAwKSk7CgogIGNvbnN0IG5hbWUgPSBmb3JtRGF0YS5nZXQoJ25hbWUnKTsKICBjb25zdCBlbWFpbCA9IGZvcm1EYXRhLmdldCgnZW1haWwnKTsKICBjb25zdCBtZXNzYWdlID0gZm9ybURhdGEuZ2V0KCdtZXNzYWdlJyk7CgogIGlmICghbmFtZSB8fCAhZW1haWwgfHwgIW1lc3NhZ2UpIHsKICAgIHRocm93IG5ldyBFcnJvcignQWxsIGZpZWxkcyBhcmUgcmVxdWlyZWQuJyk7CiAgfQoKICAvLyBJbiBhIHJlYWwgYXBwbGljYXRpb24sIHlvdSB3b3VsZCBzZW5kIHRoZSBkYXRhIHRvIGEgc2VydmVyCiAgY29uc29sZS5sb2coJ0Zvcm0gZGF0YTonLCB7IG5hbWUsIGVtYWlsLCBtZXNzYWdlIH0pOwoKICByZXR1cm4geyBzdWNjZXNzOiB0cnVlLCBtZXNzYWdlOiAnVGhhbmsgeW91IGZvciB5b3VyIHN1Ym1pc3Npb24hJyB9Owp9CgpmdW5jdGlvbiBDb250YWN0Rm9ybSgpIHsKICBjb25zdCB7IHBlbmRpbmcsIGRhdGEsIGVycm9yIH0gPSB1c2VGb3JtU3RhdHVzKCk7CgogIHJldHVybiAoCiAgICA8Zm9ybSBhY3Rpb249e2hhbmRsZVN1Ym1pdH0+CiAgICAgIDxkaXY+CiAgICAgICAgPGxhYmVsIGh0bWxGb3I9Im5hbWUiPk5hbWU6PC9sYWJlbD4KICAgICAgICA8aW5wdXQgdHlwZT0idGV4dCIgaWQ9Im5hbWUiIG5hbWU9Im5hbWUiIGRpc2FibGVkPXtwZW5kaW5nfSAvPgogICAgICA8L2Rpdj4KICAgICAgPGRpdj4KICAgICAgICA8bGFiZWwgaHRtbEZvcj0iZW1haWwiPkVtYWlsOjwvbGFiZWw+CiAgICAgICAgPGlucHV0IHR5cGU9ImVtYWlsIiBpZD0iZW1haWwiIG5hbWU9ImVtYWlsIiBkaXNhYmxlZD17cGVuZGluZ30gLz4KICAgICAgPC9kaXY+CiAgICAgIDxkaXY+CiAgICAgICAgPGxhYmVsIGh0bWxGb3I9Im1lc3NhZ2UiPk1lc3NhZ2U6PC9sYWJlbD4KICAgICAgICA8dGV4dGFyZWEgaWQ9Im1lc3NhZ2UiIG5hbWU9Im1lc3NhZ2UiIGRpc2FibGVkPXtwZW5kaW5nfSAvPgogICAgICA8L2Rpdj4KICAgICAgPGJ1dHRvbiB0eXBlPSJzdWJtaXQiIGRpc2FibGVkPXtwZW5kaW5nfT4KICAgICAgICB7cGVuZGluZyA/ICdTdWJtaXR0aW5nLi4uJyA6ICdTdWJtaXQnfQogICAgICA8L2J1dHRvbj4KCiAgICAgIHtlcnJvciAmJiA8cCBzdHlsZT17eyBjb2xvcjogJ3JlZCcgfX0+RXJyb3I6IHtlcnJvci5tZXNzYWdlfTwvcD59CiAgICAgIHtkYXRhPy5zdWNjZXNzICYmIDxwIHN0eWxlPXt7IGNvbG9yOiAnZ3JlZW4nIH19PntkYXRhLm1lc3NhZ2V9PC9wPn0KICAgIDwvZm9ybT4KICApOwp9CgpleHBvcnQgZGVmYXVsdCBDb250YWN0Rm9ybTsK"
                class="copy-button"
                title="Copy code"
              >
                Copy
              </button>
            </div>
          </pre>
        </div>
      

<p><b>Explicación:</b></p>

<ol>
  <li><b>'use server':</b> Esta directiva designa la función <code>handleSubmit</code> como una React Server Action. Las Server Actions le permiten ejecutar código del lado del servidor directamente desde sus componentes de React.</li>
  <li><b><code>useFormStatus()</code>:</b> Llamamos al hook <code>useFormStatus()</code> dentro del componente <code>ContactForm</code>. Devuelve un objeto con las siguientes propiedades:</li>
    <ul>
      <li><code>pending</code>: Un booleano que indica si el formulario se está enviando actualmente.</li>
      <li><code>data</code>: Datos devueltos por la Server Action después de un envío exitoso.</li>
      <li><code>error</code>: Un objeto de error si la Server Action lanza un error.</li>
    </ul>
  <li><b>Elementos del formulario:</b> El formulario incluye campos de entrada para nombre, correo electrónico y mensaje. El atributo <code>disabled</code> se establece en <code>pending</code>, evitando que el usuario interactúe con el formulario mientras se está enviando.</li>
  <li><b>Botón de envío:</b> El texto del botón de envío cambia a "Enviando..." cuando <code>pending</code> es verdadero.</li>
  <li><b>Mensajes de error y éxito:</b> El componente muestra un mensaje de error si <code>error</code> está presente, y un mensaje de éxito si <code>data.success</code> es verdadero.</li>
</ol>

<h3>Propiedades devueltas por <code>useFormStatus</code></h3>

<ul>
  <li><b><code>pending</code>:</b> Un valor booleano que indica si el formulario se está enviando actualmente. Esto es útil para deshabilitar el botón de envío y mostrar un indicador de carga.</li>
  <li><b><code>data</code>:</b> Los datos devueltos por la Server Action después de un envío de formulario exitoso. Puede ser cualquier valor serializable.
  <li><b><code>error</code>:</b> Un objeto de error si la Server Action lanzó una excepción durante el envío. Esto le permite mostrar mensajes de error al usuario.</li>
  <li><b><code>action</code>:</b> La función de la Server Action que fue llamada. Esto puede ser útil para identificar qué acción fue responsable del estado actual.</li>
  <li><b><code>formState</code>:</b> (Menos común) El estado del formulario asociado con el formulario. Esto es particularmente relevante cuando se gestiona el estado del formulario externamente.</li>
</ul>

<h2>Casos de uso avanzados</h2>

<h3>1. Manejo de errores y validación dinámicos</h3>

<p><code>experimental_useFormStatus</code> se puede utilizar para implementar el manejo de errores y la validación dinámicos. Por ejemplo, puede verificar la propiedad <code>error</code> y mostrar mensajes de error específicos según el tipo de error que ocurrió.</p>


        <div class="code-block-wrapper">
          <pre data-language="code">
            <code>function ContactForm() {
  const { pending, data, error } = useFormStatus();

  let errorMessage = null;

  if (error) {
    if (error.message === 'All fields are required.') {
      errorMessage = 'Please fill out all the required fields.';
    } else {
      errorMessage = 'An error occurred while submitting the form.';
    }
  }

  return (
    <form action={handleSubmit}>
      {/* ... form fields ... */}

      {errorMessage && <p style={{ color: 'red' }}>Error: {errorMessage}</p>}
      {data?.success && <p style={{ color: 'green' }}>{data.message}</p>}
    </form>
  );
}
</code>
            <div class="copy-button-container">
              <button 
                data-code="ZnVuY3Rpb24gQ29udGFjdEZvcm0oKSB7CiAgY29uc3QgeyBwZW5kaW5nLCBkYXRhLCBlcnJvciB9ID0gdXNlRm9ybVN0YXR1cygpOwoKICBsZXQgZXJyb3JNZXNzYWdlID0gbnVsbDsKCiAgaWYgKGVycm9yKSB7CiAgICBpZiAoZXJyb3IubWVzc2FnZSA9PT0gJ0FsbCBmaWVsZHMgYXJlIHJlcXVpcmVkLicpIHsKICAgICAgZXJyb3JNZXNzYWdlID0gJ1BsZWFzZSBmaWxsIG91dCBhbGwgdGhlIHJlcXVpcmVkIGZpZWxkcy4nOwogICAgfSBlbHNlIHsKICAgICAgZXJyb3JNZXNzYWdlID0gJ0FuIGVycm9yIG9jY3VycmVkIHdoaWxlIHN1Ym1pdHRpbmcgdGhlIGZvcm0uJzsKICAgIH0KICB9CgogIHJldHVybiAoCiAgICA8Zm9ybSBhY3Rpb249e2hhbmRsZVN1Ym1pdH0+CiAgICAgIHsvKiAuLi4gZm9ybSBmaWVsZHMgLi4uICovfQoKICAgICAge2Vycm9yTWVzc2FnZSAmJiA8cCBzdHlsZT17eyBjb2xvcjogJ3JlZCcgfX0+RXJyb3I6IHtlcnJvck1lc3NhZ2V9PC9wPn0KICAgICAge2RhdGE/LnN1Y2Nlc3MgJiYgPHAgc3R5bGU9e3sgY29sb3I6ICdncmVlbicgfX0+e2RhdGEubWVzc2FnZX08L3A+fQogICAgPC9mb3JtPgogICk7Cn0K"
                class="copy-button"
                title="Copy code"
              >
                Copy
              </button>
            </div>
          </pre>
        </div>
      

<h3>2. Actualizaciones optimistas</h3>

<p>Las actualizaciones optimistas implican actualizar la interfaz de usuario inmediatamente como si el envío del formulario fuera a tener éxito, incluso antes de que el servidor confirme el envío. Esto puede mejorar la experiencia del usuario al hacer que la aplicación se sienta más receptiva. <code>experimental_useFormStatus</code> se puede usar para gestionar actualizaciones optimistas manteniendo una variable de estado separada para rastrear los datos optimistas.</p>


        <div class="code-block-wrapper">
          <pre data-language="code">
            <code>import { useState } from 'react';
import { experimental_useFormStatus as useFormStatus } from 'react-dom';

async function handleSubmit(formData) {
  'use server';
  // Simulate an asynchronous form submission
  await new Promise((resolve) => setTimeout(resolve, 2000));

  const name = formData.get('name');
  const email = formData.get('email');
  const message = formData.get('message');

  if (!name || !email || !message) {
    throw new Error('All fields are required.');
  }

  // In a real application, you would send the data to a server
  console.log('Form data:', { name, email, message });

  return { success: true, message: 'Thank you for your submission!' };
}

function ContactForm() {
  const { pending, data, error } = useFormStatus();
  const [optimisticMessage, setOptimisticMessage] = useState('');

  const handleSubmitOptimistic = async (formData) => {
      setOptimisticMessage('Submitting...');
      const result = await handleSubmit(formData); //Awaits the server action.
      if (result?.success){
        setOptimisticMessage(result.message)
      } else {
          setOptimisticMessage("");
      }

  };
  return (
    <form action={handleSubmitOptimistic}>
      <div>
        <label htmlFor="name">Name:</label>
        <input type="text" id="name" name="name" disabled={pending} />
      </div>
      <div>
        <label htmlFor="email">Email:</label>
        <input type="email" id="email" name="email" disabled={pending} />
      </div>
      <div>
        <label htmlFor="message">Message:</label>
        <textarea id="message" name="message" disabled={pending} />
      </div>
      <button type="submit" disabled={pending}>
        {pending ? 'Submitting...' : 'Submit'}
      </button>

      {error && <p style={{ color: 'red' }}>Error: {error.message}</p>}
      {optimisticMessage && <p style={{ color: 'green' }}>{optimisticMessage}</p>}
    </form>
  );
}

export default ContactForm;
</code>
            <div class="copy-button-container">
              <button 
                data-code="aW1wb3J0IHsgdXNlU3RhdGUgfSBmcm9tICdyZWFjdCc7CmltcG9ydCB7IGV4cGVyaW1lbnRhbF91c2VGb3JtU3RhdHVzIGFzIHVzZUZvcm1TdGF0dXMgfSBmcm9tICdyZWFjdC1kb20nOwoKYXN5bmMgZnVuY3Rpb24gaGFuZGxlU3VibWl0KGZvcm1EYXRhKSB7CiAgJ3VzZSBzZXJ2ZXInOwogIC8vIFNpbXVsYXRlIGFuIGFzeW5jaHJvbm91cyBmb3JtIHN1Ym1pc3Npb24KICBhd2FpdCBuZXcgUHJvbWlzZSgocmVzb2x2ZSkgPT4gc2V0VGltZW91dChyZXNvbHZlLCAyMDAwKSk7CgogIGNvbnN0IG5hbWUgPSBmb3JtRGF0YS5nZXQoJ25hbWUnKTsKICBjb25zdCBlbWFpbCA9IGZvcm1EYXRhLmdldCgnZW1haWwnKTsKICBjb25zdCBtZXNzYWdlID0gZm9ybURhdGEuZ2V0KCdtZXNzYWdlJyk7CgogIGlmICghbmFtZSB8fCAhZW1haWwgfHwgIW1lc3NhZ2UpIHsKICAgIHRocm93IG5ldyBFcnJvcignQWxsIGZpZWxkcyBhcmUgcmVxdWlyZWQuJyk7CiAgfQoKICAvLyBJbiBhIHJlYWwgYXBwbGljYXRpb24sIHlvdSB3b3VsZCBzZW5kIHRoZSBkYXRhIHRvIGEgc2VydmVyCiAgY29uc29sZS5sb2coJ0Zvcm0gZGF0YTonLCB7IG5hbWUsIGVtYWlsLCBtZXNzYWdlIH0pOwoKICByZXR1cm4geyBzdWNjZXNzOiB0cnVlLCBtZXNzYWdlOiAnVGhhbmsgeW91IGZvciB5b3VyIHN1Ym1pc3Npb24hJyB9Owp9CgpmdW5jdGlvbiBDb250YWN0Rm9ybSgpIHsKICBjb25zdCB7IHBlbmRpbmcsIGRhdGEsIGVycm9yIH0gPSB1c2VGb3JtU3RhdHVzKCk7CiAgY29uc3QgW29wdGltaXN0aWNNZXNzYWdlLCBzZXRPcHRpbWlzdGljTWVzc2FnZV0gPSB1c2VTdGF0ZSgnJyk7CgogIGNvbnN0IGhhbmRsZVN1Ym1pdE9wdGltaXN0aWMgPSBhc3luYyAoZm9ybURhdGEpID0+IHsKICAgICAgc2V0T3B0aW1pc3RpY01lc3NhZ2UoJ1N1Ym1pdHRpbmcuLi4nKTsKICAgICAgY29uc3QgcmVzdWx0ID0gYXdhaXQgaGFuZGxlU3VibWl0KGZvcm1EYXRhKTsgLy9Bd2FpdHMgdGhlIHNlcnZlciBhY3Rpb24uCiAgICAgIGlmIChyZXN1bHQ/LnN1Y2Nlc3MpewogICAgICAgIHNldE9wdGltaXN0aWNNZXNzYWdlKHJlc3VsdC5tZXNzYWdlKQogICAgICB9IGVsc2UgewogICAgICAgICAgc2V0T3B0aW1pc3RpY01lc3NhZ2UoIiIpOwogICAgICB9CgogIH07CiAgcmV0dXJuICgKICAgIDxmb3JtIGFjdGlvbj17aGFuZGxlU3VibWl0T3B0aW1pc3RpY30+CiAgICAgIDxkaXY+CiAgICAgICAgPGxhYmVsIGh0bWxGb3I9Im5hbWUiPk5hbWU6PC9sYWJlbD4KICAgICAgICA8aW5wdXQgdHlwZT0idGV4dCIgaWQ9Im5hbWUiIG5hbWU9Im5hbWUiIGRpc2FibGVkPXtwZW5kaW5nfSAvPgogICAgICA8L2Rpdj4KICAgICAgPGRpdj4KICAgICAgICA8bGFiZWwgaHRtbEZvcj0iZW1haWwiPkVtYWlsOjwvbGFiZWw+CiAgICAgICAgPGlucHV0IHR5cGU9ImVtYWlsIiBpZD0iZW1haWwiIG5hbWU9ImVtYWlsIiBkaXNhYmxlZD17cGVuZGluZ30gLz4KICAgICAgPC9kaXY+CiAgICAgIDxkaXY+CiAgICAgICAgPGxhYmVsIGh0bWxGb3I9Im1lc3NhZ2UiPk1lc3NhZ2U6PC9sYWJlbD4KICAgICAgICA8dGV4dGFyZWEgaWQ9Im1lc3NhZ2UiIG5hbWU9Im1lc3NhZ2UiIGRpc2FibGVkPXtwZW5kaW5nfSAvPgogICAgICA8L2Rpdj4KICAgICAgPGJ1dHRvbiB0eXBlPSJzdWJtaXQiIGRpc2FibGVkPXtwZW5kaW5nfT4KICAgICAgICB7cGVuZGluZyA/ICdTdWJtaXR0aW5nLi4uJyA6ICdTdWJtaXQnfQogICAgICA8L2J1dHRvbj4KCiAgICAgIHtlcnJvciAmJiA8cCBzdHlsZT17eyBjb2xvcjogJ3JlZCcgfX0+RXJyb3I6IHtlcnJvci5tZXNzYWdlfTwvcD59CiAgICAgIHtvcHRpbWlzdGljTWVzc2FnZSAmJiA8cCBzdHlsZT17eyBjb2xvcjogJ2dyZWVuJyB9fT57b3B0aW1pc3RpY01lc3NhZ2V9PC9wPn0KICAgIDwvZm9ybT4KICApOwp9CgpleHBvcnQgZGVmYXVsdCBDb250YWN0Rm9ybTsK"
                class="copy-button"
                title="Copy code"
              >
                Copy
              </button>
            </div>
          </pre>
        </div>
      

<h3>3. Indicadores de progreso para la carga de archivos</h3>

<p>Aunque <code>experimental_useFormStatus</code> no proporciona directamente actualizaciones de progreso para la carga de archivos, puede combinarlo con otras técnicas para implementar indicadores de progreso. Por ejemplo, puede usar la API <code>FormData</code> para rastrear el progreso de la carga de un archivo y actualizar la interfaz de usuario en consecuencia.</p>

<p><b>Nota:</b> Debido a que este hook funciona principalmente en conjunto con las Server Actions, el acceso directo al progreso de la carga dentro de <code>experimental_useFormStatus</code> es limitado. Normalmente, manejaría el progreso de la carga dentro de su código de Server Action (si es posible, dependiendo del entorno) y luego reflejaría el estado general del envío del formulario usando <code>experimental_useFormStatus</code>.</p>

<h2>Consideraciones globales</h2>

<p>Al desarrollar formularios para una audiencia global, es esencial considerar lo siguiente:</p>

<ul>
  <li><b>Localización:</b> Asegúrese de que todas las etiquetas de los formularios, los mensajes de error y las notificaciones de éxito estén localizados al idioma preferido del usuario. Utilice bibliotecas y frameworks de internacionalización (i18n) para gestionar las traducciones de manera efectiva.</li>
  <li><b>Formatos de fecha y número:</b> Use formatos de fecha y número apropiados según la configuración regional del usuario. Por ejemplo, las fechas pueden formatearse como MM/DD/AAAA en los Estados Unidos, pero como DD/MM/AAAA en muchos otros países. De manera similar, los formatos de número pueden usar diferentes separadores decimales y de miles.</li>
  <li><b>Zonas horarias:</b> Si su formulario implica programación o información sensible al tiempo, tenga en cuenta las zonas horarias. Permita que los usuarios seleccionen su zona horaria y convierta las horas correspondientemente.</li>
  <li><b>Formatos de dirección:</b> Los formatos de dirección varían significativamente entre países. Proporcione campos de dirección flexibles que se adapten a diferentes estructuras de dirección.</li>
  <li><b>Accesibilidad:</b> Asegúrese de que sus formularios sean accesibles para usuarios con discapacidades. Use elementos HTML semánticos, proporcione texto alternativo para las imágenes y asegúrese de que sus formularios se puedan navegar con el teclado.</li>
  <li><b>Formatos de moneda:</b> Si está trabajando con valores monetarios, formatee la moneda apropiadamente según la ubicación del usuario. Use símbolos de moneda y convenciones de formato que sean familiares para el usuario. Por ejemplo, en los EE. UU., usaría "$1,234.56", mientras que en Alemania, podría usar "1.234,56 €".</li>
  <li><b>Sensibilidad cultural:</b> Sea consciente de las diferencias culturales que pueden afectar el diseño del formulario. Por ejemplo, ciertos colores o símbolos pueden tener diferentes significados en diferentes culturas.</li>
</ul>

<p><b>Ejemplo: Formulario de dirección internacional</b></p>

<p>Un formulario de dirección simple podría asumir una dirección al estilo de EE. UU. Un formulario con conciencia global necesita acomodar más flexibilidad.</p>


        <div class="code-block-wrapper">
          <pre data-language="code">
            <code>
 <form>
  <label for="address1">Address Line 1:</label>
  <input type="text" id="address1" name="address1"><br><br>

  <label for="address2">Address Line 2 (Optional):</label>
  <input type="text" id="address2" name="address2"><br><br>

  <label for="city">City:</label>
  <input type="text" id="city" name="city"><br><br>

  <label for="state">State/Province:</label>
  <input type="text" id="state" name="state"><br><br>

  <label for="postalCode">Postal Code:</label>
  <input type="text" id="postalCode" name="postalCode"><br><br>

  <label for="country">Country:</label>
  <select id="country" name="country">
   <option value="USA">United States</option>
   <option value="CAN">Canada</option>
   {/* More country options */}
  </select><br><br>

  <input type="submit" value="Submit">
 </form>
</code>
            <div class="copy-button-container">
              <button 
                data-code="CiA8Zm9ybT4KICA8bGFiZWwgZm9yPSJhZGRyZXNzMSI+QWRkcmVzcyBMaW5lIDE6PC9sYWJlbD4KICA8aW5wdXQgdHlwZT0idGV4dCIgaWQ9ImFkZHJlc3MxIiBuYW1lPSJhZGRyZXNzMSI+PGJyPjxicj4KCiAgPGxhYmVsIGZvcj0iYWRkcmVzczIiPkFkZHJlc3MgTGluZSAyIChPcHRpb25hbCk6PC9sYWJlbD4KICA8aW5wdXQgdHlwZT0idGV4dCIgaWQ9ImFkZHJlc3MyIiBuYW1lPSJhZGRyZXNzMiI+PGJyPjxicj4KCiAgPGxhYmVsIGZvcj0iY2l0eSI+Q2l0eTo8L2xhYmVsPgogIDxpbnB1dCB0eXBlPSJ0ZXh0IiBpZD0iY2l0eSIgbmFtZT0iY2l0eSI+PGJyPjxicj4KCiAgPGxhYmVsIGZvcj0ic3RhdGUiPlN0YXRlL1Byb3ZpbmNlOjwvbGFiZWw+CiAgPGlucHV0IHR5cGU9InRleHQiIGlkPSJzdGF0ZSIgbmFtZT0ic3RhdGUiPjxicj48YnI+CgogIDxsYWJlbCBmb3I9InBvc3RhbENvZGUiPlBvc3RhbCBDb2RlOjwvbGFiZWw+CiAgPGlucHV0IHR5cGU9InRleHQiIGlkPSJwb3N0YWxDb2RlIiBuYW1lPSJwb3N0YWxDb2RlIj48YnI+PGJyPgoKICA8bGFiZWwgZm9yPSJjb3VudHJ5Ij5Db3VudHJ5OjwvbGFiZWw+CiAgPHNlbGVjdCBpZD0iY291bnRyeSIgbmFtZT0iY291bnRyeSI+CiAgIDxvcHRpb24gdmFsdWU9IlVTQSI+VW5pdGVkIFN0YXRlczwvb3B0aW9uPgogICA8b3B0aW9uIHZhbHVlPSJDQU4iPkNhbmFkYTwvb3B0aW9uPgogICB7LyogTW9yZSBjb3VudHJ5IG9wdGlvbnMgKi99CiAgPC9zZWxlY3Q+PGJyPjxicj4KCiAgPGlucHV0IHR5cGU9InN1Ym1pdCIgdmFsdWU9IlN1Ym1pdCI+CiA8L2Zvcm0+Cg=="
                class="copy-button"
                title="Copy code"
              >
                Copy
              </button>
            </div>
          </pre>
        </div>
      

<p><b>Mejoras para uso global:</b></p>

<ul>
 <li>Use una lista completa de países.</li>
 <li>Considere una configuración de campo de dirección dinámica basada en la selección del país (usando una biblioteca o API para la validación del formato de dirección).</li>
 <li>Permita una línea de dirección 3 o más, ya que algunos países requieren un formato de dirección muy específico.</li>
 <li>Separe "Estado/Provincia/Región" y "Código Postal/Código ZIP" en campos separados con etiquetas claras que funcionen internacionalmente.</li>
</ul>

<h2>Mejores prácticas para usar <code>experimental_useFormStatus</code></h2>

<ul>
  <li><b>Mantenga las Server Actions simples:</b> Trate de mantener sus Server Actions enfocadas en el procesamiento de datos y evite actualizaciones complejas de la interfaz de usuario directamente dentro de la acción. Confíe en la propiedad <code>data</code> devuelta por <code>experimental_useFormStatus</code> para actualizar la interfaz de usuario en el componente cliente.</li>
  <li><b>Maneje los errores con elegancia:</b> Implemente un manejo de errores robusto dentro de sus Server Actions para capturar posibles excepciones. Use la propiedad <code>error</code> para mostrar mensajes de error informativos al usuario.</li>
  <li><b>Proporcione retroalimentación clara:</b> Use la propiedad <code>pending</code> para proporcionar retroalimentación clara al usuario mientras el formulario se está enviando (por ejemplo, deshabilitando el botón de envío, mostrando un indicador de carga).</li>
  <li><b>Optimice el rendimiento:</b> Tenga en cuenta el rendimiento, especialmente cuando se trata de formularios grandes o Server Actions complejas. Use técnicas como la memoización y la división de código para optimizar el rendimiento de su aplicación.</li>
  <li><b>Considere la accesibilidad:</b> Asegúrese de que sus formularios sean accesibles para todos los usuarios, incluidos aquellos con discapacidades. Siga las pautas de accesibilidad y use tecnologías de asistencia para probar sus formularios.</li>
</ul>

<h2>Alternativas a <code>experimental_useFormStatus</code></h2>

<p>Aunque <code>experimental_useFormStatus</code> proporciona una forma conveniente de gestionar el estado del formulario, existen enfoques alternativos que puede considerar:</p>

<ul>
  <li><b>Gestión de estado personalizada:</b> Puede gestionar manualmente el estado del formulario utilizando las características de gestión de estado integradas de React (por ejemplo, <code>useState</code>, <code>useReducer</code>). Este enfoque proporciona más flexibilidad pero requiere más código repetitivo.</li>
  <li><b>Bibliotecas de formularios:</b> Bibliotecas de formularios como Formik, React Hook Form y Final Form proporcionan soluciones integrales de gestión de formularios, incluida la validación, el manejo de envíos y la gestión del estado.</li>
  <li><b>Bibliotecas de gestión de estado de terceros:</b> Las bibliotecas de gestión de estado como Redux, Zustand y Recoil se pueden utilizar para gestionar el estado del formulario de manera centralizada. Este enfoque es adecuado para aplicaciones más grandes con requisitos complejos de gestión de estado.</li>
</ul>

<p>La elección del enfoque depende de los requisitos específicos de su aplicación. <code>experimental_useFormStatus</code> es particularmente adecuado para aplicaciones que utilizan React Server Components y requieren una forma simple y declarativa de gestionar el estado del formulario.</p>

<h2>Conclusión</h2>

<p><code>experimental_useFormStatus</code> es una adición valiosa al conjunto de herramientas de React para construir formularios dinámicos y receptivos. Al proporcionar una forma centralizada y declarativa de gestionar el estado del formulario, este hook simplifica el manejo de formularios asíncronos, mejora la experiencia del usuario y potencia el manejo de errores. Aunque todavía es una API experimental, <code>experimental_useFormStatus</code> representa una dirección prometedora para la gestión de formularios en React, particularmente en el contexto de los React Server Components. Al comprender sus características, beneficios y mejores prácticas, los desarrolladores pueden aprovechar este hook para crear formularios más robustos y fáciles de usar para una audiencia global.</p>

<p>Como con cualquier característica experimental, es crucial mantenerse actualizado sobre los últimos desarrollos y estar preparado para posibles cambios en la API a medida que evoluciona hacia una versión estable. Sin embargo, es probable que los principios y beneficios fundamentales de <code>experimental_useFormStatus</code> sigan siendo relevantes, lo que lo convierte en una herramienta que vale la pena explorar e incorporar en su flujo de trabajo de desarrollo con React.</p></div><footer class="mt-12 pt-8 border-t border-gray-200"><h3 class="text-sm font-semibold text-gray-900 mb-3 dark:text-white/90">Tags:</h3><div class="flex flex-wrap gap-2"><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">React</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">experimental_useFormStatus</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">estado de formulario</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">gestión de formularios</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">React Server Components</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">experiencia de usuario</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">envío de formulario</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">formularios asíncronos</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">mejora progresiva</span></div></footer></article></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:2","P:2")</script><script>$RB=[];$RV=function(b){$RT=performance.now();for(var a=0;a<b.length;a+=2){var c=b[a],e=b[a+1];null!==e.parentNode&&e.parentNode.removeChild(e);var f=c.parentNode;if(f){var g=c.previousSibling,h=0;do{if(c&&8===c.nodeType){var d=c.data;if("/$"===d||"/&"===d)if(0===h)break;else h--;else"$"!==d&&"$?"!==d&&"$~"!==d&&"$!"!==d&&"&"!==d||h++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;e.firstChild;)f.insertBefore(e.firstChild,c);g.data="$";g._reactRetry&&g._reactRetry()}}b.length=0};
$RC=function(b,a){if(a=document.getElementById(a))(b=document.getElementById(b))?(b.previousSibling.data="$~",$RB.push(b,a),2===$RB.length&&(b="number"!==typeof $RT?0:$RT,a=performance.now(),setTimeout($RV.bind(null,$RB),2300>a&&2E3<a?2300-a:b+300-a))):a.parentNode.removeChild(a)};$RC("B:1","S:1")</script><div hidden id="S:3"></div><script>$RC("B:3","S:3")</script><div hidden id="S:0"></div><script>$RC("B:0","S:0")</script></body></html>